<template>
  <div class="index">
    <image :src="imgUrl" style="width: 702upx; height: 791upx" />
    <div style="position: fixed; top: 999999999999999999999upx">
      <!-- #ifdef MP-WEIXIN -->
      <canvas id="canvas" type="2d" style="width: 702px; height: 791px" />
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <canvas id="canvas" canvas-id="canvas" style="width: 702px; height: 791px" />
      <!-- #endif -->
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { useDrawPoster } from '@/js_sdk/u-draw-poster'
  const headImgUrl = '../../static/share/tx.png'
  const codeImgUrl = '../../static/share/code.png'
  export default {
    data: () => ({
      imgUrl: ''
    }),
    async onReady() {
      // 创建绘制工具
      const dp = await useDrawPoster({
        selector: 'canvas',
        loading: true,
        debugging: true,
        width: 702,
        height: 791
      })
      const w = dp.canvas.width
      const h = dp.canvas.height
      // 绘制基本背景
      dp.draw((ctx) => {
        ctx.fillStyle = '#FFAC3F'
        ctx.fillRoundRect(0, 0, w, h, 12)
        ctx.clip()
        ctx.fillStyle = '#ffffff'
        ctx.fillRoundRect(24, 94, 654, 672, 8)
				ctx.fillStyle = '#ffffff'
      })
      // 绘制图片内容
      dp.draw(async (ctx) => {
        await Promise.all([
          ctx.drawImage('/static/share/logo1.png', 20, 20, 35, 35),
        ])
        // 用户二维码
        await ctx.drawRoundImage(codeImgUrl, 152, 296, 366, 366)
        // 用户头像
        await ctx.drawRoundImage(headImgUrl, 232, 164, 100,100, 100)
      })
      // 绘制中间文字内容
      dp.draw((ctx) => {
        ctx.fillStyle = '#333333'
        ctx.font = '400 28px Source Han Sans CN'
        ctx.fillText('翠花探店 ', 350, 230)
      })
      this.imgUrl = await dp.createImagePath()
    }
  }
</script>

<style lang="scss">
  page,
  .index {
    height: 100%;
  }
  .index {
    position: relative;
    text-align: center;
    background: rgba($color: grey, $alpha: 0.2);
  }
  image {
    margin-top: 30rpx;
  }
</style>
